<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>生产派管理</title>
    <link rel="stylesheet" href="/webjars/layui/2.5.6/css/layui.css">
    <script src="/webjars/layui/2.5.6/layui.js" type="text/javascript"></script>
</head>
<body>

<script id="userTool" type="text/html">
    <button class="layui-btn" onclick="userAdd()">添加</button>
    <button class="layui-btn" onclick="batchDel()">批量删除</button>
</script>
<script id="userDCL" type="text/html">
    <button class="layui-btn" lay-event="userUpdate">修改</button>
</script>

<div>
    <table id="userTable" lay-filter="userTable" class="layui-table"></table>
</div>

<div id="userHandler" style="display: none">
    <form class="layui-form" id="userForm" lay-filter="userForm" style="padding: 35px;">
        <div class="layui-form-item">
            <label class="layui-form-label">生产派编号</label>
            <div class="layui-input-inline">
                <input type="text" name="taskId" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作业编号</label>
            <div class="layui-input-inline">
                <select name="workId" id="workId"  lay-verify="required">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生产批号</label>
            <div class="layui-input-inline">
                <select name="manufactureSn" id="manufactureSn"  lay-verify="required">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">派工数量</label>
            <div class="layui-input-inline">
                <input type="text" name="taskQuantity" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">派工工时</label>
            <div class="layui-input-inline">
                <input type="text" name="workingHours" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>
</body>
<script>
    function userAdd() {
        userDCL("add");
    }
    function userUpdate(data) {
        userDCL("update",data);
        // console.log(data);
    }

    function userDCL(path,data) {
        layui.use(['table', 'form', 'jquery', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var $ = layui.jquery;
            var layer = layui.layer;
            var msg="修改"
            if(path=="add"){
                $("#userForm")[0].reset();
                msg="添加";
            }else {
                form.val("userForm",data);
            }
            layer.open({
                type: 1,
                title: msg,
                area: ["500px","450px"],
                content: $("#userHandler"),
                btn: ['确定', '取消'],
                yes() {
                    let user = form.val("userForm");
                    console.log(user)
                    $.post(path,user).done(({msg})=>{
                        layer.close(layer.index)
                        layer.msg(msg);
                        form.render('select');
                        table.reload("userTable")
                    })
                }
            })
        })
    }
    function searchByUserName(){
        var $=layui.jquery;
        var status=$("#productId").val();
        console.log("编号"+status)
        layui.table.reload('userTable',{where:{productId:status}})
    }
    layui.use(['table','form','laydate','jquery','element','layedit'],function () {
        //创建一个编辑器

        let table=layui.table;
        let form=layui.form;
        let $=layui.jquery;
        let laydate=layui.laydate;
        let layedit=layui.layedit;
        table.render({
            id:"userTable",
            elem:"#userTable",
            url:"/task/list",
            toolbar:"#userTool",
            cols:[
                [
                    {type:"checkbox"},
                    {title:"生产派编号",field:"taskId"},
                    {title:"作业编号",templet: '<div><a href="javascript:void(0);">{{d.workId}}</a></div>'},
                    {title:"生产批号",templet:'<div><a href="javascript:void(0);">{{d.manufactureSn}}</a></div>'},
                    {title:"派工数量",field:"taskQuantity"},
                    {title:"派工工时",field:"workingHours"},
                    {title:"操作",toolbar: "#userDCL"}
                ]
            ],
            page:{
                limit:6,
                limits:[9,12,15]
            }
        });
        table.on("tool(userTable)",function ({data,event}) {
            switch (event) {
                case "userUpdate":
                    userUpdate(data);
            }
        })

        $.get("/manufacture/manufactureList",({data})=>{
            for (let d of data) {
                console.log(d)
                var option=$("<option></option>");
                option.html(d.manufactureSn);
                option.val(d.manufactureSn);
                $("#manufactureSn").append(option);
            }
            form.render('select');
        })
        $.get("/work/workList",({data})=>{
            for (let d of data) {
                console.log(d)
                var option=$("<option></option>");
                option.html(d.workId);
                option.val(d.workId);
                $("#workId").append(option);
            }
            form.render('select');
        })


    })
    //批量删除
    function batchDel() {
        layui.use(['table','layer','jquery'],function () {
            var table=layui.table;
            var layer=layui.layer;
            var $=layui.jquery;
            var product=table.checkStatus("userTable").data;
            var ids=product.map(product=>"ids="+product.taskId).join("&")
            if(ids==""){
                layer.msg("请选择要删除的工艺计划")
                return;
            }
            console.log(product)
            console.log(ids)
            $.get("/task/patchDel?"+ids,({msg})=>{
                layer.msg(msg)
                table.reload("userTable");
            })

        })
    }
</script>
</body>
</html>